<template>
<!--主体-->
<div style="padding: 10px">
    <!--搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%;" clearable/>
      <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>
      <el-button type="primary" @click="add">新增商品</el-button>
    </div>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="id" label="ID" sortable/>
      <el-table-column prop="goodsName" label="商品名"/>
      <el-table-column label="图片">
        <template #default="scope">
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.image1"
              :preview-src-list="srcList"
              fit="cover"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述"/>
      <el-table-column prop="price" label="价格"/>
      <el-table-column label="状态">
        <template #default="scope">
          <el-button type="success" plain v-if="scope.row.status===0" size="small">
            在售
          </el-button>
          <el-button type="success" plain v-if="scope.row.status===1" size="small">
            已下单
          </el-button>
          <el-button type="success" plain v-if="scope.row.status===2" size="small">
            已付款
          </el-button>
          <el-button type="success" plain v-if="scope.row.status===3" size="small">
            已发货
          </el-button>
          <el-button type="success" plain v-if="scope.row.status===4" size="small">
            已签收
          </el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="auto">
        <template #default="scope">
          <el-button v-if="scope.row.status===0" link type="primary" size="small" @click="handleEdit(scope.row)"
          >编辑
          </el-button
          >
          <el-popconfirm title="确认要删除吗?" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button v-if="scope.row.status===0" link type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
          <el-button v-if="scope.row.status===2" link type="primary" size="small" @click="handleEdit(scope.row)"
          >发货
          </el-button
          >
          <el-button v-if="scope.row.status!=0" link type="primary" size="small" @click="handleEdit(scope.row)"
          >聊天
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px 0">
<!--      <div class="demo-pagination-block">-->
        <el-pagination
                v-model:currentPage="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[5, 10, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
        </el-pagination>

        <el-dialog v-model="dialogVisible" title="商品信息" width="30%">
          <el-form :model="form" lable-width="120px">
            <el-form-item label="名称">
              <el-input v-model="form.goodsName" style="width: 80%;"></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="form.description" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="form.price" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="form.type" style="width: 80%;"></el-input>
            </el-form-item>
            <el-form-item label="图片">
              <el-upload
                class="avatar-uploader"
                action="api/sys/headerImgUpload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="form.image1" :src = "form.image1" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>        
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="save">确定</el-button>
            </span>
          </template>
        </el-dialog>

        <el-dialog v-model="dialogVisible1" title="商品信息" width="30%">
          <el-form :model="form" lable-width="120px">
            <el-form-item label="名称">
              <el-input v-model="form.goodsName" style="width: 80%;"></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="form.description" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="form.price" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="form.type" style="width: 80%;"></el-input>
            </el-form-item>
            <el-form-item label="图片">
              <el-upload
                class="avatar-uploader"
                action="api/sys/headerImgUpload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="form.image1" :src = "form.image1" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>        
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取消</el-button>
              <el-button type="primary" @click="save1">修改</el-button>
            </span>
          </template>
        </el-dialog>

<!--      </div>-->
    </div>
  </div>
</template>

<script>
import request from "../utils/request";

export default {

  name: 'HomeView',
  components: {
  },
  data() {
    return {
      form: {},
      dialogVisible: false,
      dialogVisible1: false,
      search: '',
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [
        
      ]
    }
  },
  created() {
    this.load()
  },
  methods: {
    handleAvatarSuccess(res) {
      this.form.image1 = res.data
      this.$message.success("上传成功")
      // this.update()
    },
    load() {
      request.get("/goods/pulish", {
        headers:{
          'token':sessionStorage.getItem("token")
        },
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        console.log(res);
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    save: function(){
        request.post("/goods/publish", this.form, {
          headers:{
            'token':sessionStorage.getItem("token")
          },
          
        }).then(res => {
          console.log(res);
          //判断操作
          if(res.code === 200 ) {
            this.$message({
              type: "success",
              message: "更新成功"
            })
          }else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load();
          this.dialogVisible = false;
        });
    },
    save1: function(){
        request.put("/goods/update", this.form).then(res => {
          console.log(res);
          //判断操作
          if(res.code === 200 ) {
            this.$message({
              type: "success",
              message: "更新成功"
            })
          }else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load();
          this.dialogVisible1 = false;
        });
    },
    add: function(){
      this.dialogVisible = true;
      this.form = {}
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible1 = true
    },
    handleSizeChange: function (pageSize) { //改变每页大小时触发
      this.pageSize = pageSize;
      this.load()
    },
    handleCurrentChange: function (pageNum) {  //改变当前页数时触发
      this.currentPage = pageNum;
      this.load()
    },
    handleDelete(id){
      console.log((id))
      request.delete("/goods/" + id).then(res => {
        // 操作判断
        if(res.code === 200) {
          this.$message({
            type: "success",
            message: "删除成功"
          })
        }else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load();  //重新加载表格
      })
    }
  }
}
</script>

<style>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
